<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<view style="z-index: -10;">
			<image src="http://n298651t63.zicp.vip:9001/image/file/20221017/a578b44580e04cf1ad7d27731fc01dbe_new.png"
				style="width: 100%;height: 40vh;"></image>
			<view class="heardImage"></view>
			<view class="heardTxt flex align-center margin-lr-sm justify-between">
				<view class="flex align-center" @click="changeCity">
					<u-icon name="map" color="#fff" size="18"></u-icon>
					<span class="margin-left-xs text-white text-df">xx市</span>
				</view>
				<view class="heardTxt_right">
					<u-icon name="search" color="#fff" size="20"></u-icon>
					<u-input v-model="searchWord" border="none" style="border: 0px;font-size: 28rpx;" color="#fff"
						fontSize="14" placeholder="搜索附近的棋牌室" placeholderStyle="color:#fff;font-size:24rpx"></u-input>
					<button class="btnSearch" @click="getStoreList">搜索</button>
				</view>
			</view>
		</view>
		<!-- 展示地区店铺列表 -->
		<view class="centerBox">
			<view v-for="(item,index) in storeList" :key="index" class="storeBox  bg-white radius"
				@click="goStoreDetalis(item)">
				<view style="display: flex;align-items: center;justify-content: space-between;"
					class="margin-bottom-sm">
					<view>
						<view class="text-black text-bold  text-xl">{{item.name}}</view>
						<view class="margin-top-xs text-gray text-sm">营业时间：09:00-24:00</view>
					</view>
					<u-icon @click.native.stop="callPhone(item)" name="phone" size="24" color="#CCAC82"></u-icon>
				</view>
				<view style="display: flex;column-gap: 1px;align-items: center; justify-content: space-between;">
					<image mode="scaleToFill" :src="item.image" style="height: 160rpx;width: 160rpx;border-radius: 10rpx;"></image>
				</view>
				<view class="flex align-center justify-start margin-top-sm">
					<u-tag text="免费WIFI" plain shape="circle" size="mini" bg-color="#fff" border-color="#eee"
						color="#999"></u-tag>
					<u-tag text="停车位" plain shape="circle" size="mini" class="margin-left-xs" bg-color="#fff"
						border-color="#eee" color="#999"></u-tag>
				</view>
				<view class="margin-top-lg flex align-center justify-between">
					<u-tag text="4小时起订" shape="circle" color="#fff" bg-color="#CCAC82" border-color="#CCAC82">
					</u-tag>
					<text class="text-gray">查看详情</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: 'Home',
		data() {
			return {
				storeList: [],
				searchWord: '', //搜索内容
				showOpenDoorModal: false,
				contentOpenDoor: '',
			}
		},
		computed: {

		},
		created() {
			this.getStoreList();
		},
		methods: {
			
			callPhone(item) {
				//#ifdef MP-WEIXIN
				uni.makePhoneCall({
					phoneNumber: item.Phone
				});
				//#endif
				//#ifdef APP-PLUS
				plus.device.dial(item.Phone, true);
				//#endif
			},

			getStoreList() {
				this.storeList = [];
				uni.$u.http.post('/getRoomList', {
					searchWord: this.searchWord
				}).then(res => {
					if (res.data.length <= 0) {
						uni.showToast({
							title: '未搜索到相关门店',
							icon: 'none'
						})
					}
					this.storeList = res.data.filter(i=> !i.parent_id)
				})
			},
			goPage(page) {
				let url = '';
				uni.$u.route({
					type: 'to',
					url: url
				});
			},
			goStoreDetalis(item) {
				// uni.setStorageSync('storeid', item.Id);
				// uni.navigateTo({
				// 	url: '/pages/index/storeindex?id=' + item.id ,
				// })
        uni.navigateTo({
          url:'/pages/index/order?id=' + item.id + '&name=' + item.name
        })
			},
			changeCity() {
				uni.navigateTo({
					url: '/pagesA/store/citylist'
				})
			},
		}
	}
</script>

<style scoped>
page {
	background: red;
}

	.heardTxt {
		position: fixed;
		top: 0px;
		padding: 20rpx;
		z-index: 2;
		display: flex;
		align-items: center;
		margin-top: 10vh;
	}

	.heardTxt_right {
		background: rgba(0, 0, 0, .3);
		border-radius: 20px;
		z-index: 2;

		width: 75%;
		height: 60rpx;
		/* 	right: 10px; */
		display: flex;
		align-items: center;
		padding: 20rpx;
		/* margin-top: 11vh; */
	}

	.heardImage {
		background: rgba(0, 0, 0, .3);
		width: 100%;
		height: 40vh;
		position: fixed;
		top: 0px;
	}


	.btnSearch {
		height: 50rpx;
		width: 160rpx;
		border-radius: 40rpx;
		color: #CCAC82;
		font-weight: 500;
		font-size: 28rpx;
		text-align: center;
		line-height: 50rpx;
		border: 0px !important;
	}

	.centerBox {
		position: fixed;
		top: 17vh;
		width: 100%;
		padding: 20rpx;
		height: 80vh;
		overflow: auto;
	}

	.storeBox {
		margin: 20rpx 10rpx;
		height: auto;
		padding: 20rpx
	}

	.boxImage {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-column-gap: 20rpx;
		margin-top: 20rpx;
	}
</style>
